<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

    <script type="text/javascript">
        $(function(){
            const app={
                data(){
                    return {
                        counter:1
                    }
                }
            }
            vm = Vue.createApp(app).mount('#app')
            vm.$watch('counter',function(NewNum,oldNum){
                alert(oldNum + ' --> '+ NewNum);
            })

            const app2 = {
              data() {
                return {
                  kilometers : 0,
                  meters:0
                }
              },
              watch : {
                  kilometers:function(val) {
                      this.kilometers = val;
                      this.meters = this.kilometers * 1000
                  },
                  meters : function (val) {
                      this.kilometers = val/ 1000;
                      this.meters = val;
                  }
              }
            }
            vm2 = Vue.createApp(app2).mount('#app2')

            vm2.$watch('kilometers', function (newValue, oldValue) {
                // document.getElementById("info").innerHTML="修改前值为: "+oldValue+"，修改后值为: " newValue;
                $('#info').text("修改前值为:"+oldValue+"，修改后值为: "+newValue);
            })

            const watchExampleVM = Vue.createApp({
               data() {
                  return {
                     question: '',
                     answer: '每个问题结尾需要输入 ? 号。'
                  }
               },
               watch: {
                  question(newQuestion, oldQuestion) {
                     if (newQuestion.indexOf('?') > -1) {
                        this.getAnswer()
                     }
                  }
               },
               methods: {
                  getAnswer() {
                     this.answer = '加载中...'
                     axios
                        .get('https://yesno.wtf/api')
                        .then(response => {
                        this.answer = response.data.answer
                     })
                        .catch(error => {
                        this.answer = '错误! 无法访问 API。 ' + error
                     })
                  }
               }
            }).mount('#watch-example')
        })
    </script>
</head>
<body>
<div id="app">
    <p style = "font-size:25px;">计数:{{counter}}</p>
    <button @click="counter++" style = "font-size:25px;">点我啊</button>
</div>

<br>
<div id = "app2">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>

<div id="watch-example">
  <p>
    输入一个问题，以 ? 号结尾输出答案:
    <input v-model="question"/>
  </p>
  <p>{{ answer }}</p>
</div> 
</body>
</html>